<template>
  <nav>
    <div class="menu-item">
      <router-link to="homePage">
        <div class="el-icon-s-home icon-icon"></div>
        <div class="icon-text_">首页</div>
      </router-link>
    </div>
    <div class="menu-item">
      <router-link to="serviceHelp">
        <div class="el-icon-question icon-icon"></div>
        <div class="icon-text_">咨询</div>
      </router-link>
    </div>
    <div class="menu-item">
      <router-link to="personalCenter">
        <div class="el-icon-user-solid icon-icon"></div>
        <div class="icon-text_">我的</div>
      </router-link>
    </div>
  </nav>
</template>

<script>
export default {
  name: "NavBottomBar"
}
</script>

<style scoped>
nav {
  display: flex;
  align-items: center;
  justify-content: center;
}

nav .menu-item {
  color: black;
  padding: 1px 3.2rem;
  text-align: center;
  border-bottom: 3px solid transparent;
  display: flex;
  transition: 0.4s;
}

nav .menu-item:active,
nav .menu-item:hover {
  background: #f0f1f5;
  border-bottom-color: #FF5858;
}

nav .menu-item a {
  color: black;
  text-decoration: none;
}

nav .menu-item .icon-icon {
  font-size: 1.6rem;
}
nav .menu-item .icon-text_ {
  font-size: 0.4rem;
}
</style>
